<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.currtdown{
				width: 300px;
				height: 300px;
				transform: translateX(150%);
				background-color: #8b0000;
			}
			.currtdown p{
				color: #fff;
				text-align: center;
				font-size: 20px;
			}
			#hour{
				font-size: 20px;
				
			}
			#minutes{
				font-size: 20px;
				
			}
			#scend{
				font-size: 20px;
				
			}
			.currtdown p:last-child{
				margin-top: 108px;
			}
			span{
				background-color: black;	
			}
		</style>
	</head>
	<body>
		<div class="currtdown">
			<p id="nowday">今天是2023年8月10日</p>
			<p>下班倒计时</p>
			<p>
				<span id="day">23 天</span>
				<i>:</i>
				<span id="hour">23小时</span>
				<i>:</i>
				<span id="minutes">30分</span>
				<i>:</i>
				<span id="scend">26秒</span>
			</p>
			<p>24号回村</p>
		</div>
		<script>
			function nowthat(){
				// 获取现在的时间锉
				const now =+new Date();
				// 将来的时间锉
				const last =+new Date('2023-8-24 18:00:00');
				// 公式 ：将来-现在=还剩下
				// 转换成秒数1秒等于1000毫秒
				const count = (last-now)/1000;
				console.log(count); 
				//获取现在的时间
				const n =new Date().toLocaleDateString();
				// 插入元素
				const nowday=document.querySelector('#nowday');
				nowday.innerHTML=`今天是${n}`;
				console.log(n)
				// 转换成时分秒的公式
				// 补零操作
				 let d = parseInt(count/60/60/24);
				let h = parseInt(count/60/60%24);
				h= h<10?'0'+h:h;
				let m = parseInt(count/60%60);
				m= m<10 ?'0'+m:m;
				let s = parseInt(count%60);
				s= s<10 ?'0'+s:s;
				
				// 获取元素
				let day=document.querySelector('#day');
				let hour = document.querySelector('#hour');
				let minutes = document.querySelector('#minutes');
				let scend = document.querySelector('#scend');
				
				console.log(d,h,m,s);
				// 插入时分秒
				day.innerHTML=d+"天";
				hour.innerHTML=h+"小时";
				minutes.innerHTML=m+'分';
				scend.innerHTML=s+'秒';
			
			}
			// 提前调用函数防止页面刷新
			nowthat();
			// 开启定时器
			setInterval(nowthat,1000)
		</script>
	</body>
</html>